<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画</title>
		<style type="text/css">
			@keyframes chenge{
				from{
					
				}
				to{
					width: 600px;
				}
			}
			
			@keyframes gaibian{
				0%{
					width: 200px;
				}
				50%{
					width: 500px;
					background: #7FFFD4;
				}
				100%{
					border: 2px solid #000000;
				}
			}
			div{
				width: 200px;
				height: 200px;
				/*margin: 100px auto;*/
				border: 1px solid #000000;
				background: #00FFFF;
				animation: chenge 3s forwards;					/*forwads 执行完毕动画，不会回去，和重复、回去会冲突 */
				/*animation: chenge 2s infinite alternate;		/*alternate表示按照原来方向在回来*/
				/*animation: gaibian 6s steps(6) 2s 5;			/*steps分段执行效果，可以做成进度条   2s为延迟执行  3为重复三次（infinite为无线循环） linear表示匀速*/
			}
		</style>
	</head>
	<body>
		<div>
			
		</div>
	</body>
</html>
